<template>
    <div class="operation">
        <a @click="addBrotherItem(index, item)" v-if="item.projectId !== 0" title="同级 +">
            <el-icon>
                <ArrowRightBold />
            </el-icon>
        </a>
        <span v-if="item.projectId !== 0">|</span>
        <a @click="addChildItem(index, item)" title="子级 + ">
            <el-icon>
                <ArrowDownBold />
            </el-icon>
        </a>
        <span>|</span>
        <a @click="editItem(index, item)" title="编辑">
            <el-icon>
                <EditPen />
            </el-icon>
        </a>
        <span>|</span>
        <a @click="deleteItem(index, item)" title="删除">
            <el-icon>
                <DeleteFilled />
            </el-icon>
        </a>
        <span v-if="item.children && item.children.length">|</span>
        <a v-if="item.children && item.children.length" @click="toggleExpand(index, item)" title="收起/展开">
            <el-icon v-if="item.expanded">
                <CaretTop />
            </el-icon>
            <el-icon v-else>
                <CaretBottom />
            </el-icon>
        </a>
        <span>|</span>
        <el-popover placement="bottom" :width="240" trigger="hover">
            <template #reference>
                <div class="item-btn">
                    <a title="更多"><el-icon>
                            <Clock />
                        </el-icon></a>
                </div>
            </template>
            <div class="item-info">
                <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
                <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
            </div>
        </el-popover>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import { ArrowRightBold, ArrowDownBold, EditPen, DeleteFilled, CaretTop, CaretBottom, Clock } from '@element-plus/icons-vue';

export default defineComponent({
    name: 'OperationButtons',
    components: {
        ArrowRightBold,
        ArrowDownBold,
        EditPen,
        DeleteFilled,
        CaretTop,
        CaretBottom,
        Clock,
    },
    props: {
        index: {
            type: Number,
            required: true,
        },
        item: {
            type: Object,
            required: true,
        },
    },
    methods: {
        addBrotherItem(index, item) {
            this.$emit('add-brother-item', index, item);
        },
        addChildItem(index, item) {
            this.$emit('add-child-item', index, item);
        },
        editItem(index, item) {
            this.$emit('edit-item', index, item);
        },
        deleteItem(index, item) {
            this.$emit('delete-item', index, item);
        },
        toggleExpand(index, item) {
            this.$emit('toggle-expand', index, item);
        },
        formatDateTime(date) {
            // 假设这里有一个日期格式化的方法
            return new Date(date).toLocaleString();
        },
    },
});
</script>

<style lang="scss" scoped>
.operation {
    display: flex;
    align-items: center;
    a {
        color: var(--global-link-color);
        cursor: pointer;
    }

    span {
        color: #eee;
        // margin: 0px 4px;
    }
}
</style>